<template>
  <HeadTail />
  <div
    class="mx-auto w-11/12 flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
  >
    <div
      class="wewh w-1/12 ml-0 mr-0 mt-20 text-center justify-center 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base;"
    >
      <div class="wew" @click="tohome">首页</div>
      <div class="wew" style="color: darkgray">分类</div>
      <div class="wew" @click="tostore">收藏</div>
      <div class="wew" @click="toorder">订单</div>
    </div>
    <div
      class="pt-0 ml-0 mt-16 w-11/12 text-center 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
    >
      <div
        class="h-20 texio w-full flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
      >
        <span class="wewe">主食</span>
        <span class="wewe" style="color: darkgray">小吃</span>
        <span class="wewe">甜品</span>
        <span class="wewe">饮品</span>
      </div>
      <div class="ime m-auto">
        <div class="ime mt-1.5 overflow-hidden">
          <img src="@/assets/home/22.png" alt="" />
        </div>
        <span
          style="
            position: absolute;
            top: 104px;
            left: 549px;
            font-size: 48px;
            color: #999999;
          "
          >畅想美食</span
        >
      </div>
      <div
        class="h-20 mt-6 w-full flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
      >
        <div class="wewe">
          <div class="wewewe m-auto">点评高分</div>
        </div>
        <div class="wewe">
          <div class="wewewe m-auto">店家补贴</div>
        </div>
        <div class="wewe">
          <div class="wewewe m-auto">首单立减</div>
        </div>
        <div class="wewe">
          <div class="wewewe m-auto">折扣商品</div>
        </div>
      </div>
      <div
        class="w-full h-2/5 outline flex mt-7 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
      >
        <div
          class="w-3/5 flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
        >
          <div
            class="tu 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
          >
            <div>
              <p style="padding-top: 19px; font-size: 30px">
                {{ list.productName }}
              </p>
              <div
                class="tutu 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
              >
                <img :src="imgArr[1]" alt="" />
              </div>
            </div>
          </div>
          <div
            style="display: inline-block; text-align: left"
            class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
          >
            <p class="pt-20">商家名称：{{ list.name }}</p>
            <p class="pt-12">商品介绍：{{ list.description }}</p>
          </div>
        </div>
        <div
          class="w-2/5 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
        >
          <div
            class="float-right flex mt-4 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base px-2"
          >
            <button @click="toevaluate(item)">评价：</button>
            <el-rate
              v-model="value"
              clearable
              @change="getvalue"
              @click="getnum"
            />
          </div>
          <div
            class="mt-28 text-right mr-11 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
          >
            价格{{ list.price }}￥
          </div>
          <div
            class="text-right mr-8 mt-11 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
          >
            <span style="font-size: 24px">月销:{{ list.sales }}</span>
            <button
              @click="goto"
              style="
                width: 142px;
                height: 46px;
                border-radius: 10px;
                background-color: #950f11;
                color: white;
              "
            >
              下单
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tutu img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tutu {
  margin-top: 16px;
  margin-left: 16px;
  width: 300px;
  height: 170px;
  border-radius: 30px;
  overflow: hidden;
}

.tu {
  margin-left: 35px;
  width: 345px;
  height: 277px;
}

.texio {
  border-bottom: 3px solid black;
}

.wew {
  height: calc(100% / 4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

.wewh {
  height: 489px;
}

.im {
  width: 1000px;
  height: 220px;
}

.ime {
  width: 1000px;
  height: 200px;
  border-radius: 18px;
  position: relative;
}

.wewewe {
  border-radius: 20px;
  width: 165px;
  height: 50px;
  border: 1px solid black;
}

.wewe {
  width: calc(100% / 4);
}
</style>

<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import axios from "axios";
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
const value = ref();
const route = useRoute();
const router = useRouter();
let list = ref({});
let idnum = ref("");
let imgArr = ref([]);
onMounted(() => {
  list.value = JSON.parse(route.query.item);
  console.log(list.value);
  imgArr.value = list.value.img.split(",");
  idnum.value = localStorage.getItem("userid");
  console.log(idnum.value);
});
function getvalue() {}
let num = ref(0);
let r = ref(1);
let p = ref(false);
function getnum(item) {
  num.value++;
  if (num.value !== 0 && num.value == 1) {
    axios
      .post(
        `http://1.14.126.98:8081/score/add?userId=${idnum.value}&productId=${list.value.productId}&score=${value.value}`
      )
      .then((res) => {
        console.log(res.data);
        p.value = true;
        r.value = 2;
      });
  }
}

function goto() {
  router.push({
    name: "orDer",
    query: {
      listArr: JSON.stringify(list.value),
      personid: idnum.value,
    },
  });
}
watchEffect(() => {
  if (value.value == 0 && num.value !== 0 && num.value !== 1) {
    axios
      .delete(
        `http://1.14.126.98:8081/score/delete?userId=${idnum.value}&productId=${list.value.productId}`
      )
      .then((res) => {
        console.log(res.data);
        num.value = 0;
        value.value = 0;
        r.value = 1;
      });
  } else if (
    p.value == true &&
    num.value !== 0 &&
    num.value !== 1 &&
    value.value !== 0 &&
    r.value == 2
  ) {
    axios
      .put(
        `http://1.14.126.98:8081/score/update?userId=${idnum.value}&productId=${list.value.productId}&score=${value.value}`
      )
      .then((res) => {
        console.log(res.data);
        r.value = 3;
      });
  }
});
function toevaluate() {
  router.push({
    name: "evaluate",
    query: {
      item: JSON.stringify(list.value),
      id: idnum.value,
    },
  });
}
function tohome() {
  router.push("Nhome");
}
function tostore() {
  router.push("StoreUp");
}
function toorder() {
  router.push("OrderForm");
}
</script>
